<template>
    <div class="collect-box">
        <van-nav-bar title="发布" />
        <div class="upload-box">
            <div class="upload-label">选择图片<text class="not-null">*</text></div>
            <van-uploader v-model="fileList" multiple />
        </div>
        <van-field v-model="message" rows="2" label="设置标题" type="textarea" label-align="top" maxlength="50"
            placeholder="新颖的标题更吸引眼球哦~(必填)" show-word-limit />
        <van-field v-model="message" rows="3" label="穿搭描述" type="textarea" label-align="top" maxlength="300"
            placeholder="请填写你的穿搭描述，传递你的设计灵感~(必填)" show-word-limit />
        <van-cell title="选择分组" is-link value="默认分组"></van-cell>
        <div class="submit-btn-box">
            <div>
                <van-icon class-prefix="iconfont" name="draft2" size="28" />
                <div class="icon-label">存草稿</div>
            </div>
            <van-button type="primary" round class="submit-btn" text="分享穿搭" />
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue";
let fileList = ref([]);
</script>
<style lang="less">
.collect-box .van-field__value {
    display: block;
}

.collect-box .van-field {
    padding-top: 0px;
    padding-bottom: 0px;
}

.upload-label {
    text-align: left;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
}

.upload-box {
    padding: 10px 0px 10px 12px;
}

.upload-box .van-uploader {
    float: left;
}

.collect-box .van-field__body {
    border: 1px #d5d7d7dd solid;
    border-radius: 10px;
    padding: 5px;
}

.submit-btn-box {
    margin-top: 15px;
    padding: 0px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .submit-btn {
        width: 60%;
        background-color: #f3533f;
        border: none;
        box-shadow: 2px 3px 5px #f058459e;
        color: #fff;
    }

    .icon-label {
        text-align: center;
        font-size: 12px;
    }
}

.not-null {
    transform: translateY(-10px);
    color: red;
    margin-left: 2px;
}
</style>